<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin:0;
        padding: 0;
    }
    html,body{
        height: 100%;
    }
</style>
<body>
    <svg width="100%" height="100%" style="background: #000;" id="svg"></svg>
</body>
<script>
    /**
     * 30个不同大小、不同颜色、随机位置、不同透明度的圆，点击会慢慢变淡、变大、直到消失
     */
    creatDraw(100);
    function creatDraw(n){
        for(var i=0;i<n;i++){
            drawCicle()
        }
    }
    function drawCicle(){
        var  circle=document.createElementNS("http://www.w3.org/2000/svg","circle");
        var isStop=false;
        circle.setAttribute("cx",rN(0,1800));
        circle.setAttribute("cy",rN(0,900));
        circle.setAttribute("r",rN(10,50));
        circle.setAttribute("fill",radomColor());
        circle.setAttribute("fill-opacity",Math.random()*0.3+0.7);
        //当前圆只能点击一次---在点击事件处理函数内部，讲当前元素的点击事件赋值为null
        circle.onclick=function () {
            this.onclick=null;
            var oldOpacity=this.getAttribute("fill-opacity");
            var oldR=this.getAttribute("r");
            var This=this;//定时器的this指向window，需要预留This

                timer=setInterval(function(){
                    oldOpacity*=0.8;
                    oldR*=1.05;
                    This.setAttribute("fill-opacity",oldOpacity);
                    This.setAttribute("r",oldR);
                    if(oldOpacity<=0.1){
                        isStop=!isStop;
                        if(isStop){
                            clearInterval(timer);
                            svg.removeChild(This);
                        }

                    }
                },50)


        }
        svg.appendChild(circle);
    }
    function rN(min,max) {
        return parseInt(Math.random()*(max-min)+min);
    }
    function radomColor(){
        var r=parseInt(Math.random()*150+100);
        var g=parseInt(Math.random()*150+100);
        var b=parseInt(Math.random()*150+100);
        return "rgb("+r+","+g+","+b+")"
    }
</script>
</html>